<template>
  <div class="container">
    <web-header></web-header>
    <div class="main">
      <div v-html="doc"></div>
    </div>
  </div>
</template>

<script>
import marked from "marked";
import config from "@/config";
import WebHeader from "@/components/WebHeader";

export default {
  name: "Index",
  components: {
    WebHeader
  },
  data() {
    return {
      title: config.title,
      subTitle: config.subTitle,
      intro: ""
    };
  },
  computed: {
    doc() {
      return marked(this.intro);
    }
  },
  mounted() {
    marked.setOptions({
      renderer: new marked.Renderer(),
      pedantic: false,
      gfm: true,
      breaks: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      xhtml: false
    });
    this.intro = `# ${config.title}

基于 [Ant Design of Vue](https://www.antdv.com/docs/vue/introduce-cn/) 组件库的 Web 项目模板。

## 模块

- 门户网站，按设计需求的自定义布局
- 后台管理，无设计需求的 Ant Design 规范布局
- 工具用例，前端常用工具用例

## 开发说明

后续所有 Web 项目均在该项目基础上进行开发。引用外部依赖时，需自检浏览器兼容性。

## 兼容性说明

- 兼容 IE 11（IE 10 小部分 Ant Design UI 组件功能受限；IE 9 Flex 布局失效；IE 8 及以下版本无法打开）
- 兼容所有现代浏览器

**国产双核浏览器即使在代码层面强制设置以急速模式运行，仍然会由其他原因导致设置无效，详情参见：[360浏览器自定义设置内核模式说明](https://bbs.360.cn/thread-14958904-1-1.html)。**

## 主题说明

基于 Less，当前支持 UI 组件静态换肤。

## 贡献代码

在 http://172.30.3.166/rd-fe/web-template 下：

- 新建 feature 分支提交新功能
- 新建 fix 分支提交错误修复

## 待完成

- 浏览器版本检测脚本，低于 IE 11 时动态提示
- 工具用例

`;
  }
};
</script>

<style scoped lang="less">
.main {
  padding: 64px;
}
</style>
